{% extends 'base.html' %}
{% load bootstrap %}
{% block js %}
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit").click(function(){
                $("#alert-area").hide();
                var registerName = $("#id_register_name").val().replace(/^\s+|\s+$/g, '');
                if (registerName == "") {
                    $("#id_register_name").css('border-color', 'red');
                    $("#notify").showNotification("Họ và tên còn trống", 2000);
                    return false;
                } else $("#id_register_name").css('border-color', '#CCC');
                var registerEmail = $("#id_register_email").val().replace(/^\s+|\s+$/g, '');
                if (!(registerEmail.split('@').length - 1 == 1
                        && registerEmail.split('.').length - 1 > 0)) {
                    $("#id_register_email").css('border-color', 'red');
                    $("#notify").showNotification("Email không tồn tại", 2000);
                    return false;
                } else $("#id_register_email").css('border-color', '#CCC');

                var registerUser = $("#id_user_name").val().replace(/^\s+|\s+$/g, '');
                if (registerUser == "") {
                    $("#id_user_name").css('border-color', 'red');
                    $("#notify").showNotification("Tài khoản còn trống", 2000);
                    return false;
                } else $("#id_user_name").css('border-color', '#CCC');

                var registerPhone = $("#id_register_phone").val().replace(/^\s+|\s+$/g, '');
                if (registerPhone == "") {
                    $("#id_register_phone").css('border-color', 'red');
                    $("#notify").showNotification("Số điện thoại còn trống", 2000);
                    return false;
                } else $("#id_register_phone").css('border-color', '#CCC');

                $("#notify").showNotification("Đang gửi dữ liệu...", 2000);

            });

        });
    </script>
{% endblock %}
{% block content %}
    <div id="alert-area">
        {{ message }}
    </div>
    <form action="" id="register_form" method="post">{% csrf_token %}
        {{ form|bootstrap }}
        <input id="submit"  type="submit" value="Submit" />
    </form>
{% endblock %}